.var {
  &--box {
    box-sizing: border-box;

    * {
      box-sizing: border-box;
    }
  }

  &--relative {
    position: relative;
  }

  &--absolute {
    position: absolute;
  }

  &--hidden {
    overflow: hidden;
  }

  &--lock {
    overflow: hidden !important;
  }

  &--block {
    display: block;
  }

  &--ellipsis {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &--inline-block {
    display: inline-block;
  }

  &--flex {
    display: flex;
  }

  &--inline-flex {
    display: inline-flex;
  }
}

:root {
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --icon-size-xs: 16px;
  --icon-size-sm: 18px;
  --icon-size-md: 20px;
  --icon-size-lg: 22px;
  --color-body: #fff;
  --color-text: #333;
  --color-primary: #3a7afe;
  --color-info: #00afef;
  --color-success: #00c48f;
  --color-warning: #ff9f00;
  --color-danger: #f44336;
  --color-disabled: #e0e0e0;
  --color-text-disabled: #aaa;
  --opacity-disabled: 0.6;
  --cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1);
  --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
  --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
  --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
}
